<template>
  <div class="car">
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item"
        v-for="item in cartList"
        :key="item.id"
        @click="singCh"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          desc="描述信息"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        >
          <template #footer>
            <van-button size="mini" @click="delFn(item)">删除</van-button>
          </template>
        </van-card>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交菜单 -->
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="checkAllFn">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
// 引入购物车数据
import { getCar, delCarData } from "@/utils/http";
export default {
  name: "Car",
  data() {
    return {
      result: [], //选中商品的集合
      checked: false, // 全选状态
      cartList: [], //购物车数组
      //goods_id:"", //当前的商品id
      // productIds:[],
    };
  },
  methods: {
    onClickEditAddress() {},
    onSubmit() {},
    // 全选事件
    checkAllFn() {
      // console.log(this.checked);
      if (this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },
    // 单选事件
    singCh() {
      if (this.result.length == this.cartList.length && this.cartList != 0) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    delFn(item) {
      // 删除商品
      // console.log(this);
      // console.log(item);
      delCarData({
        // 引入路由,赋值设置样式
        productIds: item.product_id.toString(),
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 0) {
          // 判断,当符合要求是刷新页面
          location.reload();
        }
      });
    },
  },
  created() {
    getCar().then((res) => {
      // console.log(res);
      this.cartList = res.data.data.cartList;
      // this.goods_id = res.data.data.cartList.goods_id
    });
  },
  computed: {
    // 总价
    totalPrice() {
      // 声明一个控制,计算属性
      let sum = 0;
      this.result.forEach((item) => {
        // 根据选中项的单价*数量 累加就是总价
        sum += item.retail_price * item.number * 100;
      });
      return sum;
    },
  },
};
</script>

<style lang='less' scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
.van-submit-bar {
  bottom: 50px;
}
</style>